<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
   .box{
       width: 300px;
       height: 300px;
       /* 默认上下线性渐变 */
       background: linear-gradient( pink,green);
       

       /* 添加位置改变渐变方向 */
       /* background: linear-gradient(to left, blue, pink); */

       /* 对角线渐变 */
       /* background: linear-gradient(to bottom right, blue, pink); */

       /* 设置渐变角度 
       在使用角度的时候，0deg 代表渐变方向为从下到上，90deg 代表渐变方向为从左到右，
       诸如此类正角度都属于顺时针方向。 而负角度意味着逆时针方向。
       */
       /* background: linear-gradient(70deg, blue, pink); */

       /* 可以设置多种颜色渐变 */
       /* background: linear-gradient(red, yellow, blue, orange); */

       /* 颜色终止位置
       你不需要让你设置的颜色在默认位置终止。 你可以通过给每个颜色设置 0，1% 或者 2% 
       或者其他的绝对数值来调整它们的位置。如果你将位置设置为百分数， 0% 表示起始点，而 100% 表示终点，
       但是如果需要的话你也可以设置这个范围之外的其他值来达到你想要的效果。如果有些位置你没有明确设置，
       那么它将会被自动计算，第一种颜色会在 0% 处停止，
       而最后一种颜色是 100%，至于其他颜色则是在它邻近的两种颜色的中间停止。 
       */
       /* background: linear-gradient(to left, lime 28px, red 77%, cyan); */

       /* 创建实线
       background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%); */

       /* 改变渐变范围 */
       /* background: linear-gradient(blue, 10%, pink); */

       /* 创建色带和条纹 */
       /* background: linear-gradient(to left,
       lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );     */
   }
   </style>
</head>
<body>
 <div class="box"></div>
</body>
</html>